<template>

<div class="common-layout">
    <div>
      <div class="title">宠物护理</div>
      <el-container>
        <el-aside class="pet-image" >
          <!-- 左边显示图片 -->
          <img src="../../assets/huli2.jpg" />
          <img src="../../assets/huli.jpeg" />
        </el-aside>
        <el-main>
          <!-- 右边显示文字 -->
          <div class="pet-info">
            <!-- 预约服务 -->
            <div>
              <el-button class="bt" @click="addopen">申请预约护理服务</el-button>
            </div>
            <p> 所谓的宠物护理，可不只是替宠物洗澡而已，还有借用专业护理用品和修剪技法及染色激发增添美感哦。</p>
            <h1 class="a1">宠物护理对宠物的健康大有益处。</h1>
            <p>例如梳毛可以按摩宠物的皮肤、促进宠物的血液循环，减少宠物患皮肤病的几率。</p>
            <p>据了解，全套宠物护理包括洗澡、做造型、清耳朵、剪指甲、剪脚底毛等等。</p>
            <p>除健康因素外，宠物护理也是一种时尚潮流，护理技巧配合修剪技术可将宠物的优点表露出来，突出宠物可爱的一面。</p>
            <h1 class="a2">为宠物做不同造型，使宠物更容易打理。</h1>
            <h1>事实上，宠物也会因外表的改变而变得更有自信心，更加讨人喜欢。</h1>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
    <!-- 新增区域 -->
  <el-dialog v-model="dialogVisible" title="护理服务信息" width="30%">
    <el-form label-width="70px" size="small">
      <el-form-item label="用户姓名">
        <el-input size="small" v-model="form.username" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户id">
        <el-input size="small" v-model="form.userid" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-input size="small" v-model="form.costime" type="date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="预约项目">
        <el-select clearable v-model="form.cosproject" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in cosmeList" :key="item.cosproject" :label="item.projectname" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预约备注">
        <el-input v-model="form.cosdesc" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物种类">
        <el-select clearable v-model="form.petstypeid" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in petstypeList" :key="item.petstypeid" :label="item.typename" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
    export default{
        name: "CosView",
      data() {
        return {
          cosList: [],
          cosmeList: [],
          petstypeList: [],
          dialogVisible: false,
          form: {},
          dialogFormVisiblepass: false,
        }
      },
      created() {
        this.getcosList();
        this.getcosmeList();
        this.getpetstypeList();
      },
      methods:{
        //新增护理框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //修改新增护理方法
        save() {
          this.$http.post("/cos/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("提交成功,等待管理员审批"),
                this.dialogVisible = false,
                this.getcosList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          this.dialogFormVisiblepass = false;
        },
        //获取根据id获取护理种类
        getcosmeList() {
          this.$http.get("/cosme").then((res) => {
            //console.log(res.data);
            if (res.data.status == 200) {
              this.cosmeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取根据id获取宠物种类
        getpetstypeList() {
          this.$http.get("/petstype").then((res) => {
            //console.log(res.data);
            if (res.data.status == 200) {
              this.petstypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取护理列表
        getcosList() {
          this.$http.get("/cos",).then((res) => {
            //console.log(res);
            if (res.data.status == 200) {
              this.cosList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    }
</script>

<style>
.pet-image {
  width: 500px;
  height: 650px;
  margin-right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.common-layout{
  line-height: 50px;
  text-align:center;
  width: 90%; 
  margin: auto; 
  margin-top: -20px;
  background-color:#cdf0fd39;
}
.title {
  background-color: #cdf0fd39;
  text-align: center;
  font-size: 250%;
  font-weight: 900;
  font-family: "宋体";
  color: #0097ce;
}
.a1 {
  font-size: 60px;
}
.a2 {
  font-size: 35px;
}
.bt{
  width: 250px;
  height: 50px;
  font-size: 25px;
  font-family:  "宋体";
  font-weight: 900;
  background-color: rgb(164, 238, 174);
}
.pet-info{
  font-family: "宋体";
  color: #00506e;
}
</style>